<template>
	<div class="skillful-bg">
	<div class="skillful-bk">
		
		<div class="bk-banner">
			<!-- <img src="../assets/1.jpg"/> -->
              <!-- <ul class="bk-banner-list">
					<li v-on:click="bkSearch($event)">新上榜</li>
					<li v-on:click="bkSearch($event)">7日热门</li>
					<li v-on:click="bkSearch($event)">30日热门</li>
					<li class="bk-banner-listlast"></li>
				</ul>
-->
			<span>技术博客:</span>
			<label v-on:click="bkSearch($event)">新上榜</label>
			<label v-on:click="bkSearch($event)">7日热门</label>
			<label v-on:click="bkSearch($event)">30日热门</label>
		
		</div>
		<div class="bk-list">
			<ul class="bk-list-ul">
				<li v-for="item in blogs" v-on:click="personBK($event,item.url)" :data-index="item.url">
					<div class="bk-list-content">
						<p class="bk-name">
							<img class="bk-name-i" src="../assets/个人.png">
							<span class="bk-name-text">{{item.name}}</span>
							<span class="bk-name-time">{{item.time}}</span>
							<span class="bk-name-num">
								<i class="el-icon-view"></i>
								{{item.read}}
							</span>
						</p>
						<p class="bk-theme">{{item.title}}</p>
						<p class="bk-intr">
								<span>{{item.content}}</span>
								<img :src="item.img"class="bk-list-pic"  />
						</p>
					</div>
					

				</li>
			</ul>
			<div class="bk-divi-page">
				<el-pagination
				  @current-change="BgCurrentChange"
				  :current-page="currentPage"
				  background
				  layout="prev, pager, next"
				  :page-size="9"
				  :total="allpage">
				</el-pagination>
				{{msg}}
			</div>
		</div>
		
	</div>
	</div>
</template>

<script>
	export default{
		name:'SkillBk',
		mounted(){
			this.swipS()
		},
		data(){
			return{
				blogs:
						[
							{
								name:"",
								time:"",
								read:"",
								title:"",
								content:"",
								img:""
							}
						],
					
				page:1,
				allpage:"",
				kind:''
			}
				
		},
		methods:{
			swipS(){
				var self = this;

				this.$http({
					method:'get',
					url:'Blogs/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Kind:'',
						Page:self.page,
					}
				}).then((response)=>{
						self.blogs = response.data[0];
						self.allpage = response.data[1];
						console.log(self.blogs)
				})
			},
			bkSearch(event){
				
	    		let Page = this.currentPage;
	    		this.currentPage=1;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		if(event.target.innerHTML=='新上榜'){
	    			this.kind = '';
	    		}else if(event.target.innerHTML=='7日热门'){
	    			this.kind = 'Seven';
	    		}else{
	    			this.kind = 'Thirty';
	    		}
	    		this.$http({
					method:'get',
					url:'Blogs',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Kind:self.kind,
						Page:Page
					}
				}).then((response)=>{
			      	self.blogs = response.data[0];
					self.allpage = response.data[1];
				})
			},
			personBK(event,url){
				window.open(url)
			},
			BgCurrentChange(val){
				this.currentPage = val;
	    		let Page = this.currentPage;
	    		let self = this;
	    		console.log(this.currentPage)
	    		if(Page==undefined){
	    			Page =1;
	    		}
	    		
	    		this.$http({
					method:'get',
					url:'/Blogs/',
					headers:{
						'Content-Type':'application/x-www-form-urlencoded'
					},
					params:{
						Kind:self.kind,
						Page:Page
					}
				}).then((response)=>{
			      	self.blogs = response.data[0];
					self.allpage = response.data[1];
				})
			}
		}
	}
</script>

<style>
	.el-pagination button{
		height: 20px;
		line-height: 20px;
	}
	.book .el-pagination.is-background .el-pager li{
		min-height: 18px!important;
	}
	.el-pagination.is-background .el-pager li{
		min-width: 14px;
	}
	.el-pager li{
		height: 18px;
		line-height: 18px;
	}
	.skillful-bg{
		position: relative;
	
	}
	.bk-divi-page{
		height: 50px;
		margin-top: 30px;
		width: 100%;
		text-align: center;
	}
	.bk-list-pic{
		width: 20%;

		
		vertical-align: top;
		
	}
	.bk-list-content p{
		margin: 0;
		text-align: left;
	}
	button:focus{
		outline: none;
	}
	.bk-theme{
		font-size: 16px;
		font-weight: bold;
		margin-top: 5px!important;
		margin-bottom:5px!important ;
		margin-left: 10px!important;
		margin-right: 10px!important;
	}
	.bk-name-i{
		width: 38px;
		vertical-align: middle;
		margin-left: 10px;
	}
	.bk-intr span{
		display: inline-block;
		width: 70%;
	}
	.bk-intr{
		position: relative;
		font-size: 12px;
		width:  100%;
		margin-left: 10px!important;
		margin-right: 10px!important;
		margin-bottom: 10px!important;
	}
	.bk-name span{
		display: inline-block;
		margin-left: 5px;
	}
	.bk-name{
		margin-top: 10px!important;
		font-size: 12px;
	}
	.bk-list-ul{
		display: inline-block;
		width: 80%;
		margin-left: 10%;
		padding: 0;
		text-align: center;
	}
	.bk-list-ul li{
		border:solid 1px white;
		
		width: 100%;
		min-height: 150px;
		min-width:300px ;
		background: white;
		position: relative;
		margin-top: 22px;
	}
	.skillful-bk h2{
		margin: 0;
		color: black;
	}
	.bk-banner-listlast{
		height: 230px!important;
	}
	.bk-banner{
		position: relative;
		width: 80%;
		margin-left: 10%;
		display: inline-block;
	}
	.bk-banner span{
		font-weight: bold;
	}
	.bk-banner label{
		display: inline-block;
		width: 70px;
		text-align: center;
		color: white;
		font-size: 12px;
		line-height: 28px;
		height: 28px;
		background: -moz-linear-gradient(left,#08bafd,#03e4fe);
		background: -webkit-linear-gradient(left,#08bafd,#03e4fe);
	}
	.skillful-bg{
		width: 100%;
		background: #f7f5f6;
		
		border: solid 1px #f7f5f6;
		position: relative;
		top: 80px;
	}
	
	.skillful-bk{
		width: 100%;
		text-align: center;
		text-align: left;
		margin-top: 30px;
	}
	ul{
		list-style: none;
		padding: 0;
		margin: 0;
	}
</style>
